<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小边牧空间</title>
</head>
<!--002FA7-->
    <style type="text/css">
        a{
            color: #15afff;
            text-decoration: none;

        }
    </style>


<body style="margin: 0;padding: 0;background-color: #363636;position: relative;
    ">

    <div id="home" style="background-color:rgba(217,248,196,0.81);background-image: linear-gradient(to right,#ffddbf,#c2c4fd);border-radius: 19px;width: 90%;margin-left: 5%;margin-top: 3%" >

            <div style="background-color: rgb(255,255,255);background-image: linear-gradient(to right,#2cfcdd,#b500f8);height: 30%;border-radius: 20px;text-align: center">
                <br>
<!--                <h1>{{user.userName}},欢迎您</h1>-->

<!--                集合的最后一个数据是登录的数据             -->
                <h1
                    v-for="(user,index) in users"
                    v-if="index==1">{{((users)[users.length-1]).userName}}欢迎您
                </h1>
<!--                上面这一段用循环获取集合 users ？ 只运行一次-->

                <br>
            </div>

            <div style="margin-left: 20%;">

                    <h2 ><font color="#6161f8">用 户 列 表</font> </h2>
                    <h5 style="margin-left: 5%"><font color="#7878fa">点击用户可访问博客</font></h5>

<!--        拼接字符串-->
                <ul type="circle" style="color: #15afff" >
<!--                                                小于  -->
                <li v-for="(user,i) in users" v-if="i < users.length-1">
                    <h2>
                 <a  :href="'http://localhost:8080/demo_war/text_SelectUser?uId='+ user.userId  ">{{user.userName}}</a>
                    </h2>

                </li>
                </ul>
                <br><br><br>
            </div>


    </div>



    <script src="js/vue.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script>

        new Vue({
            el:"#home",
            data(){
                return {
                    users:[],
                }
            },mounted()//页面加载完成后
            {
                var _this = this;
                    axios({
                        method:"post",
                        url:"http://localhost:8080/demo_war/user_SelectAll",
                        data:""
                    }).then(function (resp) {
                        // alert(resp.data);
                        _this.users = resp.data;

                    })


            }

        })


        // axios({
        //     method:"post",
        //     url:"http://localhost:8080/demo_war/user_SelectAll",
        //     data:""
        // }).then(function (resp) {
        //     alert(resp.data);
        // })

    </script>
</body>
</html>